DHTML Menu Builder Actions 
Setting the HotSpots

Introduction

The hotspots are HTML elements on your web page, usually arranged in a way that mimic a toolbar, that will be used as triggers for the menus. This means that whenever the user's mouse moves over or clicks one of these items, a menu will be displayed.

These elements must be created by you, because DHTML Menu Builder does not create the hotspots. This will allow you to be as creative as you need to and blend your toolbar design with the rest of the page layout.

There's only one thing you must remember when creating these hotspots... no matter what type of hotspots you're using, images, text, or whatever, they must be converted into null hyperlinks.

A null hyperlink is a hyperlink that points to itself. Let's say you have a hotspot that is actually an image. Its source HTML code should look very similar to this one:

<img border="0" src="images/op1.jpg" width="560" height="61">

Then, to convert the <img> tag into a null hyperlink, all we have to do is enclose the <img> tag between a null anchor:

<a href="#"><img border="0" src="images/op1.jpg" width="560" height="61"></a>

For more information you can review our online Advanced Tutorial, the section The null-Hyperlink mystery

Starting the HotSpot Editor

To start the HotSpot Editor, you can select it from the Tools->HotSpot Editor.

You will notice that the HotSpot Editor looks very similar to a web browser and it will have loaded your web site's main HTML document, previously specified in the Final HTML Document property of the Project Properties dialog.

The HotSpot Editor Interface

In the group list you will find all the groups you have created in your project. To the left of the group list is the (x, y) coordinates where the menus will appear.

The Alignment list gives you the option to position the menu in several different ways, relative to the hotspot so you can better accommodate it to your layout.

Setting the HotSpots  

To start attaching your groups to the hotspots in your page, just locate the hotspot for the selected group and click it. You will notice that the HotSpot Editor will make the hotspot darker so you know it has been assigned. Also, you'll notice that a rectangle appears when you move through the possible hotspots so you can have a preview of how they will look like.

Then, simply select another group from the list, or the Next button to select the next one, and click over another hotspot. repeat this procedure until you have attached all the hotspots.

Once you're finished attaching the hotspots, click the Save button to apply your changes.

The HotSpot Editor will then attach the necessary code to your hotspots so when activated it by the user, they display the menus. Also, it will include the code necessary to load the JS file(s).

You must keep in mind that the HotSpot Editor will modify your HTML document when you click the Save button. Even when we have worked very hard to try to preserve the exact format of the original file, some reformatting may take place when the HotSpot Editor attaches the code.

Since your page will be edited and modified, it is a very good idea to always make backup copies before trying the HotSpot Editor. 

Using the HotSpot Editor on documents using frames

This information applies only when your hotspots are in one frame, but the menus will show in another

Let's take a common situation where you have a web site with two frames, the first, a small banner-like frame at the top, and another big one to display the contents.

Usually, when setting the project properties, you would make the Final HTML document property point to the HTML document containing your frameset information. However, when using frames you must make an exception. Both the Document containing the HotSpots and the Final HTML document properties must point to the same file, the file that contains the hot spots.

Then, when launching the HotSpot Editor, simply attach the menus (make sure you choose the correct alignment setting) and the Editor will take care of the rest.

IMPORTANT: If you change the name of any group or the type of Optimization, compiling will not be enough to reflect the changes on you implementation. You will also need to run the HotSpot Editor.
In order to make it easier for you, you can choose the Compile & Update HotSpots option, by clicking on the small arrow besides the Compile icon on the main toolbar.

---